<template>
  <div>
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>填空题列表</span>
      </div>
      <div class="text item">
        <div class="changeBtn">
          <el-button
            type="primary"
            size="mini"
            style="float: right;margin-left:10px;"
            @click="handleUpdate"
          >总分配置</el-button>
          <el-button
            type="primary"
            size="mini"
            :loading="totalLoading"
            style="float: right;margin-left:10px;"
            @click="handleTotal"
          >生成总分</el-button>
        </div>

        <el-table v-loading="loading" :data="tableList">
          <el-table-column label="类型" align="center">总分</el-table-column>
          <el-table-column label="去除科目" align="center" prop="removeSubject" />
          <el-table-column label="总分表状态" align="center" prop="status"/>
          <el-table-column label="总分表状态" align="center" prop="status">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-refresh"
                @click="resetQuery(scope.row)"
              >重置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 总分配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      :before-close="cancel"
      width="500px"
      :close-on-click-modal="true"
      @open="openDialog"
      append-to-body
    >
      <el-button icon="el-icon-circle-plus-outline" class="add-select-btn" type="primary" @click="addSelect()">添加</el-button>
      <el-form ref="editForm" :model="form" :rules="rules" label-width="100px">
        <div v-for="(item, index) in form" :key="index">
          <el-form-item :label="`去除单科${Number(index.replace(/[^0-9]/ig,''))+1}：`" :prop="index">
            <el-select
              v-model="form[index]"
              placeholder="请选择单科"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in singleTableList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {queryIsOk, queryRemoveSubject, queryTotalScoreState, getCalculateScoreList, dpTotalScoreInsert, saveRemoveSubject} from "@/api/toolsystem/grade";
  export default {
    name: "totalScoreList",
    data() {
      return {
        // 遮罩层
        loading: false,
        totalLoading: false,
        // 总分去除科目表格数据列表
        tableList: [{
          removeSubject: null,
          status: null
        }],
        // 单科表格数据列表
        singleTableList: [],
        isChecked: false, // 防重复点击
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {
          labelName0: null,
        },
        // 表单校验
        rules: {
          labelName0: [
            {
              required: true,
              message: "请选择单科",
              trigger: "change"
            }
          ],
        },
      };
    },
    methods: {
      // 重置按钮操作
      resetQuery(){
        this.$confirm('重置会清空总分表，是否确定操作?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            const id = '12321';
            saveRemoveSubject(id)
              .then(response => {
                console.log(response)
                if (response.code != 200) return this.msgError(response.msg);
                this.msgSuccess(response.msg);
                this.getList();
              })
              .catch(error => {
                console.log(error);
              });
          })
          .catch(()=>{
            this.msgInfo("取消操作");
          })
      },
      addSelect(){
        let index = Object.keys(this.form).length
        let name = 'labelName'+index
        this.$set(this.form, name, "")
        this.$set(this.rules, name, this.rules["labelName0"])
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.form = {
          labelName0: null,
        };
        this.rules = {
          labelName0: [{
            required: true,
            message: "请选择单科",
            trigger: "change"
          }
          ]};
        this.$refs["editForm"].resetFields();
      },
      /** 总分配置提交按钮 */
      submitForm() {
        this.$refs["editForm"].validate(valid => {
          if (!valid) return;
          let subjectIds = [];
          for(let i in this.form){
            subjectIds.push(this.form[i])
          }
          saveRemoveSubject(subjectIds.join(','))
            .then(response => {
              if (response.code != 200) return this.msgError(response.msg);
              this.msgSuccess(response.msg);
              this.cancel();
              this.getList();
            })
            .catch(error => {
              console.log(error);
            });
        });
      },
      // 打开总分配置弹框，获取单科列表
      openDialog(){
        this.getSingleList()
      },
      /** 总分配置按钮操作 */
      handleUpdate() {
        console.log(this.form, this.rules)
        this.open = true;
        this.title = "配置总分";
      },
      // 查询是否可以执行,true可通行； false不可通行
      queryIsOk() {
        return queryIsOk()
          .then(res => {
            if (res.code != 200) {
              return false;
            }
            if (res.data.isOk) {
              return true;
            } else {
              this.msgInfo(res.data.msg)
              return false;
            }
          })
          .catch(error => {
            console.log(error)
            return false;
          })
      },
      // 总分生成按钮操作
      async handleTotal(){
        let status = await this.queryIsOk()
        if(!status){
          return;
        }
        this.totalLoading = true
        dpTotalScoreInsert()
          .then(response => {
            console.log(response)
            if (response.code != 200) {
              this.totalLoading = false
              return this.msgError(response.msg);
            }
            this.totalLoading = false
            this.getList()
            this.msgSuccess(response.msg)
          })
          .catch(error => {
            this.totalLoading = false
            console.log(error);
          });
      },
      /** 查询单科列表 */
      getSingleList() {
        getCalculateScoreList()
          .then(response => {
            if (response.code != 200) {
              return this.msgError(response.msg);
            }
            this.singleTableList = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      },
      /** 查询总分去除科目列表 */
      getList() {
        this.loading = true;
        queryTotalScoreState()
          .then(response => {
            console.log(response)
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }
            this.tableList[0]['status']= response.msg
            this.loading = false;
          })
          .catch(error => {
            console.log(error);
            this.loading = false;
          });
        queryRemoveSubject()
          .then(response => {
            console.log(response)
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }
            this.tableList[0]['removeSubject']= response.msg
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            console.log(error);
          });
      },
    }
  };
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/card.scss";
  .add-select-btn{
    position: absolute;
    right: 20px;
    z-index: 1000;
  }
</style>

